<template>
  <ActivityPhonePreview>
    <div :class="['phone', props.absolute_url && 'position']" :style="'background-image: url(' + props.absolute_url + ')'">
      <!-- <img v-if="props.absolute_url" :src="props.absolute_url" class="default_bg" alt=""> -->
      <div class="content_box">
        <div class="inp_box">请输入口令</div>
        <div class="alert_box">当前口令不正确请重新输入</div>
        <div class="btn_box" :style="{ fontSize: fontSize() ,lineHeight: lineHeight()}">
          {{ props.receive_desc }}
        </div>
      </div>
    </div>
  </ActivityPhonePreview>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import ActivityPhonePreview from '../index.vue'

const props = defineProps({
  absolute_url: {
    type: String,
    default: ''
  },
  receive_desc: {
    type: String,
    default: ''
  }
})

const fontSize = ()=> {
      let size = 64
      switch (props.receive_desc.length) {
        case 1:
          size = 64
          break
        case 2:
          size = 38
          break
        case 3:
          size = 30
          break
        case 4:
          size = 34
          break
        case 5:
          size = 27
          break
        case 6:
          size = 26
          break
        case 7:
        case 8:
          size = 22
          break
        default:
          size = 18
      }
      return `${size}px`
    }

const lineHeight = ()=> {
      let height = 30
      switch (props.receive_desc.length) {
        case 1:
          height = 64
          break
        case 2:
          height = 38
          break
        case 3:
          height = 30
          break
        case 4:
          height = 34
          break
        case 5:
          height = 27
          break
        case 6:
          height = 30
          break
        case 7:
        case 8:
          height = 25
          break
        default:
          height = 18
      }
      return `${height}px`
    }

const formData = reactive<any>({

})

</script>
<style lang="scss" scoped>
.phone {
  position: relative;
  width: 100%;
  height: 603px;
  margin-bottom: 16px;
  background-size: cover;
  // border: 1px solid #eaeaea;
  overflow: hidden;
  .default_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .title_box {
    position: absolute;
    display: flex;
    align-items: center;
    width: 347px;
    height: 44px;
    padding-left: 11px;
    background: #ffffff;
    z-index: 3;
    border-radius: 1px;
    border: 1px solid #f5f5f5;
    .title_r {
      flex: 1;
      padding-right: 20px;
      text-align: center;
    }
  }
  .content_box {
    margin-top: 60px;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/smartMarketing/order_red_bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 9;
    .inp_box {
      position: absolute;
      top: 80px;
      left: 50%;
      width: 136px;
      height: 36px;
      line-height: 36px;
      transform: translateX(-50%);
      text-align: center;
      color: #fff;
      background: #ed120e;
      border-radius: 12px;
      font-size: 14px;
    }
    .alert_box {
      position: absolute;
      top: 146px;
      left: 50%;
      width: 160px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      transform: translateX(-50%);
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 8px;
      font-size: 12px;
    }
    .btn_box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 364px;
      left: 50%;
      width: 82px;
      height: 53px;
      padding-left: 3px;
      font-weight: 600;
      font-size: 28px;
      transform: translateX(-50%);
      color: #fb201c;
      background-color: #ffd07d;
      text-align: center;
      box-sizing: border-box;
    }
  }
}
.position {
  background-position: 0 0;
}
</style>
